<template>
	<div :id="geetestId">
	</div>
</template>
<script>
import { geetest3 } from 'api'
import _ from 'lodash'
export default {
	name: 'z-geetest',
	props: {
		product: {
			type: String,
			default: 'float'
		},
		bindon: {
			type: String,
			default: ''
		},
		embedid: {
			type: String,
			default: ''
		},
		width: {
			type: String,
			default: '100%'
		}
	},
	data() {
		return {
			geetestId: 'geetest_' + _.now()
		}
	},
	mounted() {
		var vm = this;

		vm.$promise.get(geetest3, {
			params: {
				rand: _.now()
			}
		}).then(function (resp) {
			console.log(resp);
		 if (resp.status == '1') {
				var geet = initGeetest({
					// protocol: 'https://',
					gt: resp.data.gt,
					challenge: resp.data.challenge,
					product: vm.product,
					offline: !resp.data.success,
					new_captcha: resp.data.new_captcha,
					width: vm.width
				}, function (obj) {
					if (vm.product == 'float' || vm.product == 'embed') {
						obj.appendTo('#' + vm.geetestId);
					} else {
						// obj.appendTo('#'+vm.bindon);
						obj.bindButton('#' + vm.bindon);
						// $('#'+vm.bindon).on('click',function(){
						// 	obj.verify();
						// })
					}
					obj.onSuccess(function () {
						vm.setGeetest(obj);
					})
				});
			 }

		})
	},
	destroyed() {
		if (document.querySelectorAll('.geetest_popup').length) {
			_.forEach(document.querySelectorAll('.geetest_popup'), (item) => {
				document.body.removeChild(item);
			})
		}
		if (document.querySelectorAll('.geetest_float').length) {
			_.forEach(document.querySelectorAll('.geetest_float'), (item) => {
				document.body.removeChild(item);
			})
		}
	},
	methods: {
		setGeetest(obj) {
			this.$emit('setGeetest',obj);
		}
	}
}
</script>
<style scoped>
.tiny {
	border: 1px solid #e3e333;
}
</style>
